<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
        <div>
            <h3>基本信息</h3>
            <el-form :inline="true" label-width="80px">
                <el-form-item label="赛事级别">
                    <el-select v-model="value2" placeholder="请选择" class="set_width">
                        <el-option value="国家级" label="国家级"></el-option>
                        <el-option value="市级" label="市级"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起始日期">
                    <el-date-picker class="set_width"
                    v-model="value1"
                    type="date"
                    placeholder="选择起始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker class="set_width"
                    v-model="value1"
                    type="date"
                    placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="比赛地点">
                    <el-input class="set_width"></el-input>
                </el-form-item>
                <el-form-item label="比赛名称">
                    <el-input class="set_width"></el-input>
                </el-form-item>
                <el-form-item label="主办单位">
                    <el-input class="set_width"></el-input>
                </el-form-item>
                <el-form-item label="承办单位">
                    <el-input class="set_width"></el-input>
                </el-form-item>
                <br>
                <el-checkbox v-model="checked">比赛管理员</el-checkbox>
                <br>
                <el-checkbox v-model="checked">允许裁判员报名</el-checkbox>
            </el-form>
        </div>
    </el-tab-pane>
    <el-tab-pane label="裁判信息" name="second">
        <el-tabs type="border-card">
            <el-tab-pane label="竞赛经理">
                <div>
                    <el-button class="bot-pad" type="primary" @click="dialogFormVisible = true">增加竞赛经理</el-button>
                    <!--列表-->
                    <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
                        <el-table-column prop="name" label="姓名" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" width="100" sortable>
                        </el-table-column>
                        <el-table-column prop="age" label="证件名称" width="100">
                        </el-table-column>
                        <el-table-column prop="birth" label="证件号码" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="addr" label="手机号" min-width="180">
                        </el-table-column>
                        <el-table-column prop="addr" label="注册时间" min-width="180" sortable>
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">通过</el-button>
                                <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">拒绝</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--工具条-->
                    <el-col :span="24" class="toolbar">
                        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
                        </el-pagination>
                    </el-col>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="仲裁">
                <div>
                    <el-button class="bot-pad" type="primary">增加仲裁</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="裁判长">
                <div>
                    <el-button class="bot-pad" type="primary">增加裁判长</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="副裁判长">
                <div>
                    <el-button class="bot-pad" type="primary">增加副裁判长</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="编排长">
                <div>
                    <el-button class="bot-pad" type="primary">增加编排长</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="裁判长助理">
                <div>
                    <el-button class="bot-pad" type="primary">增加裁判长助理</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="裁判员">
                <div>
                    <el-button class="bot-pad" type="primary">增加裁判员</el-button>
                </div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-checkbox-group 
                            v-model="checkedCities1"
                            :min="1"
                            :max="2">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
	import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        data() {
            return {
                filters: {
					name: ''
				},
                activeName: 'first',
                checked: true,
                value1: '',
                value2: '',
                users: [],
                listLoading: false,
                total: 0,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                checkedCities1: ['上海', '北京'],
                cities: cityOptions
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
            getUsers() {
				let para = {
					page: this.page,
					name: this.filters.name
				};
				this.listLoading = true;
				//NProgress.start();
				getUserListPage(para).then((res) => {
					this.total = res.data.total;
					this.users = res.data.users;
					this.listLoading = false;
					//NProgress.done();
				});
			},
        },
        mounted() {
			this.getUsers();
		}
    };
</script>
<style>
.bot-pad {
    margin-bottom: 20px;
}
</style>
